<template>
	<view>
		<map class="map" :latitude="location.latitude" :longitude="location.longitude" :scale="20"
			:markers="markers"></map>
	</view>
</template>

<script setup>
	import { computed, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js';

	let qqmapsdk; // 全局保存地图核心对象

	const location = reactive({
		longitude: 116.39742,
		latitude: 39.909
	});

	const markers = computed(() => {
		return [{
			id: 1,
			latitude: location.latitude,
			longitude: location.longitude,
			iconPath: '/static/logo.png',
			width: 20,
			height: 20
		}]
	})

	onLoad(() => {
		initQQMap();
		onMapSearch();
		getUserLocation();
	})

	const initQQMap = () => {
		// 实例化API核心类
		qqmapsdk = new QQMapWX({
			key: 'HLDBZ-BTUH4-RXRUI-XGOES-6RDJJ-5BFM2'
		});
	}


	const onMapSearch = () => {
		qqmapsdk.search({
			keyword: 'kfc', //搜索关键词
			success: res => {
				console.log(res);
			}
		})
	}




	const getUserLocation = () => {
		// uni.getLocation({
		// 	type: 'gcj02',
		// 	success(res) {
		// 		console.log('定位获取成功', res);
		// 		location.latitude = res.latitude;
		// 		location.longitude = res.longitude;
		// 	},
		// 	fail(err) {
		// 		console.log('定位获取失败', err);
		// 	}
		// })
		qqmapsdk.reverseGeocoder({
			success: res => {
				console.log(res);
			}
		})

	}
</script>

<style>
	.map {
		width: 100%;
		height: 100vh;
	}
</style>